<template>
	<div class="basic-config">
		<el-form ref="form" :model="form" label-width="200px">
			<el-row :gutter="20">
				<!-- 用户初始密码 -->
				<el-col :span="12">
					<el-form-item label="用户初始密码"><el-input v-model="form.password"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button @click="handleSave('USER_PASSWORD', form.password)" icon="el-icon-check" title="保存" type="primary"></el-button>
				</el-col>
				<!-- 验证码开关 -->
				<el-col :span="24">
					<el-form-item label="验证码开关">
						<el-switch v-model="form.valiCode" active-value="1" inactive-value="0" @change="handleSave('VAILCODE', form.valiCode)"></el-switch>
					</el-form-item>
				</el-col>
				<!-- 网站置灰 -->
				<el-col :span="24">
					<el-form-item label="网站置灰">
						<el-switch v-model="form.graySite" active-value="1" inactive-value="0" @change="handleSave('GRAY_SITE', form.graySite)"></el-switch>
					</el-form-item>
				</el-col>
				<!-- 注册审核 -->
				<!-- <el-col :span="24">
					<el-form-item label="注册审核">
						<el-switch
							v-model="form.registerAudit"
							active-value="2"
							inactive-value="1"
							@change="handleSave('REGISTER_AUDIT', form.registerAudit)"
						></el-switch>
					</el-form-item>
				</el-col> -->
				<!-- 用户类型 -->
				<el-col :span="24">
					<el-form-item label="用户类型">
						<el-tag :key="tag.value" v-for="tag in form.userTypeList" closable :disable-transitions="false" @close="handleClose(tag)">
							{{ tag.deName }}
						</el-tag>
						<el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="showAddDialog">新增</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="业务附件大小限制(M)"><el-input v-model="form.businessSize"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button @click="handleSave('BUSI_ATTA_SIZE', form.businessSize)" icon="el-icon-check" title="保存" type="primary"></el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="系统附件大小限制(M)"><el-input v-model="form.systemSize"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button @click="handleSave('SYSTEM_ATTA_SIZE', form.systemSize)" icon="el-icon-check" title="保存" type="primary"></el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="业务附件类型限制"><el-input type="textarea" v-model="form.systemType"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button @click="handleSave('SYSTEM_ATTA_TYPE', form.systemType)" icon="el-icon-check" title="保存" type="primary"></el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="系统自动退出时间设置(分钟)"><el-input v-model="form.quitTime"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button @click="handleSave('SYS_QUIT_TIME', form.quitTime)" icon="el-icon-check" title="保存" type="primary"></el-button>
				</el-col>
			</el-row> -->
		</el-form>
		<!-- 新增枚举子集弹窗 -->
		<el-dialog title="新增数据" :visible.sync="dialogVisible" width="30%" :show-close="false">
			<el-form ref="enumListform" :model="enumListform" label-width="80px">
				<el-form-item label="名称"><el-input v-model="enumListform.deName"></el-input></el-form-item>
				<el-form-item label="值"><el-input-number v-model="enumListform.deValue" controls-position="right" :min="1"></el-input-number></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveDicChildren">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
			enumListform: {},
			userTypeListId: '',
			form: {
				password: '',
				reviewType: '',
				recommendCount: '5',
				educationDetail: '0',
				videoDragBar: '0',
				valiCode: '0',
				graySite: '0',
				registerAudit: '0',
				businessSize: '',
				systemSize: '',
				systemType: '',
				quitTime: '',
				userTypeList: []
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		//删除用户分类
		handleClose(tag) {
			this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(async () => {
					await this.$store.dispatch('deleteDicChildren', tag.id);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.init();
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		//显示弹窗
		showAddDialog() {
			this.enumListform = {};
			this.dialogVisible = true;
		},
		//保存子集信息
		saveDicChildren() {
			const res = this.handleSaveEnumListChildren('TB_SYS_USER_TYPE', this.enumListform);
			if (res) {
				this.dialogVisible = false;
				this.enumListform = {};
			}
		},
		async init() {
			//获取用户初始密码
			this.form.password = await this.$store.dispatch('getDictByCode', 'USER_PASSWORD');
			//验证码开关
			this.form.valiCode = await this.$store.dispatch('getDictByCode', 'VAILCODE');
			//网站置灰
			this.form.graySite = await this.$store.dispatch('getDictByCode', 'GRAY_SITE');
			//注册审核
			this.form.registerAudit = await this.$store.dispatch('getDictByCode', 'REGISTER_AUDIT');
			//推荐数量
			// this.form.recommendCount = await this.$store.dispatch(
			//   'getDictByCode',
			//   'RECOMMEND_COUNT',
			// )
			//获取用户类型列表
			let id = await this.$store.dispatch('getDictionaryEnumListIdByCode', 'TB_SYS_USER_TYPE');
			this.userTypeListId = id;
			this.form.userTypeList = await this.$store.dispatch('getDictionaryEnumListChildrenById', id);
			//业务附件大小
			this.form.businessSize = await this.$store.dispatch('getDictByCode', 'BUSI_ATTA_SIZE');
			//系统附件大小
			this.form.systemSize = await this.$store.dispatch('getDictByCode', 'SYSTEM_ATTA_SIZE');
			//系统附件类型
			this.form.systemType = await this.$store.dispatch('getDictByCode', 'SYSTEM_ATTA_TYPE');
			//系统退出时间设置
			this.form.quitTime = await this.$store.dispatch('getDictByCode', 'SYS_QUIT_TIME');
		},
		//保存信息
		async handleSave(code, name) {
			try {
				await this.$store.dispatch('saveDicByCode', { code, name });
				this.$message({
					message: '操作成功',
					type: 'success'
				});
			} catch (error) {
				console.log(error);
			}
		},
		//新增枚举子级信息
		async handleSaveEnumListChildren(code, data) {
			try {
				data.dictId = this.userTypeListId;
				this.$store.dispatch('saveDicChildren', data);
				this.init();
			} catch (error) {
				console.log(error);
			}
		}
	}
};
</script>
<style scoped lang="scss">
.basic-config {
	width: 90%;
	min-width: 1000px;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
</style>
